<template>
  <view class="address-management-page w100p f fd-col ai-c">
    <nav-bar left-text="地址簿" />
    <bg-set background="#f2f3f7" />
    <scroll-view
      scroll-y="true"
      class="scroll-y"
      @scrolltolower="scrolltolower"
    >
      <view>
        <template v-if="loading">
          <loading />
        </template>
        <template v-else-if="!loading && userInfos.length >= 1">
          <address-card
            v-for="(item, index) in userInfos"
            :key="item"
            :userInfo="item"
            :class="[index === pressIndex ? 'long-press' : '']"
            @longpress="longpress(item, index)"
          />
        </template>
        <template v-else-if="!loading && userInfos.length === 0 && success">
          <loading-empty
            tip="没有地址可供选择，快去创建吧~"
            buttonText="创建地址"
            url="/pages/profile/addressManagement/address-edit"
          />
        </template>
        <template v-else-if="!loading && userInfos.length === 0 && !success"
          ><loading-error
        /></template>
        <scroll-view-holder />
      </view>
    </scroll-view>
    <view class="address-management-page__footer f jc-c ai-c">
      <van-button type="primary" round style="width: 80%" @click="makeAddress"
        >新增地址</van-button
      >
    </view>
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        type="warn"
        mode="base"
        title="确定要删除选中地址吗"
        content="点击确定将删除选中地址"
        :before-close="true"
        @close="closePopup"
        @confirm="confirm"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>
<script>
import storageOperation from "/utils/storage";
import profileAPI from "/api/modules/profile";
import AddressCard from "./components/address-card.vue";
export default {
  name: "address-management-page",
  components: {
    AddressCard,
  },
  data() {
    return {
      loading: false,
      success: true,
      userInfos: [],
      formData: {},
      pressData: null,
      pressIndex: "",
    };
  },
  onShow() {
    setTimeout(() => {
      this.getUserInfo();
    }, 10);
  },
  methods: {
    scrolltolower() {
      uni.showToast({
        title: "我可是有底线的哈",
        duration: 2000,
        icon: "none",
        position: "top",
      });
    },
    makeAddress() {
      uni.navigateTo({
        url: "/pages/profile/addressManagement/address-new-built",
      });
    },
    getUserInfo() {
      this.loading = true;
      this.success = true;
      this.userInfos = [];
      const userName = storageOperation.getStorageSync("userName").value;
      profileAPI
        .getUserInfo({ userName })
        .then((res) => {
          this.userInfos = res;
        })
        .catch((err) => {
          this.success = false;
          uni.showToast({
            title: "加载列表失败",
            icon: "error",
            duration: 1000,
            position: "top",
          });
          console.log(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    longpress(data, index) {
      this.pressIndex = index;
      this.pressData = data;
      this.$refs.popup.open();
    },
    closePopup() {
      this.pressIndex = "";
      this.$refs.popup.close();
    },
    confirm() {
      this.closePopup();
      const userName = storageOperation.getStorageSync("userName").value;
      const { subUserName, subUserPhone, subUserAddress } = this.pressData;
      const params = { userName, subUserName, subUserPhone, subUserAddress };
      profileAPI
        .deleteAddress(params)
        .then((res) => {
          console.log(res);
          uni.showToast({
            title: "删除选中地址成功",
            icon: "success",
            duration: 1000,
            positions: "top",
          });
          this.getUserInfo();
        })
        .catch((err) => {
          console.log(err);
          uni.showToast({
            title: "删除选中地址失败",
            icon: "error",
            durations: 1000,
            position: "top",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.address-management-page {
  position: fixed;
  height: 100vh;
  .scroll-y {
    height: calc(100vh - 44rpx);
    .long-press {
      background: #e3e9fb;
    }
  }
  &__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 160rpx;
    background-color: #fff;
    box-shadow: 0 -2px 4px #eee;
  }
}
</style>
